<template>
	<div class="tab-wrapper" v-show="!isFullScreenTable" v-cloak>
		<ul class="list-inline" id="tab_box">
			<li v-for="(item, index) in tab.list" :key="index" :class="index === activeIndex ? 'active' : ''">
				<a
					href="javascript:;"
					class="toggle-menu"
					:data-url="item.url"
					:data-id="item.id"
					@click.prevent="clickOneTab(index, item)"
					@contextmenu.prevent="toContextmenu(index, $event)"
					>{{ item.name }}</a
				><i class="close" @click="closeThisTab(index, item.url)">&times;</i>
			</li>
		</ul>
		<context-menu
			v-if="contextMenu.isShow"
			:top="contextMenu.top"
			:left="contextMenu.left"
			:tab-index="contextMenu.index"
			v-on:closeFn="hideContextMenu"
		></context-menu>
		<div class="more-tab-wrapper">
			<a href="javascript:;" class="show-more-tab" @click="isShowOperate = !isShowOperate"
				><i class="ion-grid"></i
			></a>
			<transition name="scale">
				<div class="tab-list-wrapper scale-box" v-show="isShowOperate">
					<context-menu
						:top="0"
						:left="0"
						:tab-index="tab.active"
						v-on:closeFn="hideContextMenu"
					></context-menu>
					<ul class="tab-list-box" v-show="tab.list.length > 0">
						<li
							class="list-item"
							v-for="(item, index) in tab.list"
							:key="index"
							:data-id="item.id"
							:data-url="item.url"
							:class="index === tab.active ? 'on' : ''"
							@click.prevent="clickOneTab(index, item)"
						>
							{{ item.name }}
						</li>
					</ul>
				</div>
			</transition>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import common from '../mixins/common.js';
import ContextMenu from './widgets/ContextMenu.vue';
import pushRouter from '../mixins/router/pushRouter.js';
let singleTabW = 160;
export default {
	mixins: [common, pushRouter],
	data() {
		return {
			isShowOperate: false,
			contextMenu: {
				isShow: false,
				top: 0,
				left: 0,
				index: -1
			}
		};
	},
	components: {
		ContextMenu
	},
	watch: {
		isMask: function(val) {
			if (!val && this.isShowOperate) {
				this.isShowOperate = false;
			}
		},
		isShowOperate: function(val) {
			if (val) {
				this.$store.commit('ISMASK_TOGGLE', true);
			} else {
				this.$store.commit('ISMASK_TOGGLE', false);
			}
		}
	},
	computed: {
		...mapGetters({
			tab: 'getTabList',
			isFullScreenTable: 'getFullScreenTable',
			isMask: 'getIsMask'
		}),
		activeIndex: function() {
			let tabList = this.$store.state.tab.list;
			let index = this.$store.state.tab.active;
			let $ActiveLi = $('#tab_box')
				.find('li')
				.eq(index);
			if ($ActiveLi.length > 0 && $ActiveLi.get(0).offsetTop > 10) {
				let _activeTab = tabList.splice(index, 1);
				tabList.unshift(_activeTab[0]);
				index = 0;
				this.$store.commit('SET_TABLIST', { active: 0, list: tabList });
			}
			return index;
		}
	},
	created() {
		let _this = this;
		this.resetTab();
		$('body').on('click', function() {
			_this.contextMenu.isShow = false;
			// _this.isShowOperate = false;
		});
	},
	methods: {
		resetTab() {
			let thisTab = JSON.parse(window.sessionStorage.getItem('thisTab'));
			let tabList = thisTab ? [thisTab] : [];
			let url = tabList.length > 0 ? thisTab.url : '';
			let _url = window.location.href;
			let first = 0;
			if (!url || _url.indexOf(url) < 0) {
				window.sessionStorage.removeItem('thisTab');
				tabList = [];
			}
			if (tabList.length > 0) {
				first = tabList[0].tag[0];
			}
			this.$store.commit('SET_TABLIST', { active: 0, list: tabList });
			this.$store.commit('SET_ALLMENU', { active: first });
			this.$store.commit('SET_SIDEMENULIST', { active: first });
		},
		clickOneTab(index, tabObj) {
			this.tab.active = index;
			this.hideContextMenu();
			this.pushRouterTo(tabObj.url);
			// if(tabObj.url) {
			//   this.$router.push({
			//     path: tabObj.url
			//   })
			// }
		},
		closeThisTab(index) {
			this.hideContextMenu();
			let _active = this.tab.active;
			let _length = this.tab.list.length;
			let to_url = '';
			let isChangeUrl = false;
			let _firstIndex = 0;
			this.tab.list.splice(index, 1);
			// 如果关闭的是当前打开的tab页，则需要 同步菜单的选择状态且将
			if (index == _active) {
				this.$store.commit('SET_SYNCHRONIZEMENU');
				isChangeUrl = true;
			}

			if (_active == _length - 1 || index < _active) {
				//如果当前的关闭的tab栏是最后一个 或者 是在 当前高亮的tab栏前面
				_active--;
			}

			if (isChangeUrl) {
				if (_active > -1) {
					to_url = this.tab.list[_active].url;
				} else {
					to_url = '';
				}
				this.pushRouterTo(to_url);
			}
			_firstIndex = _active > -1 ? this.tab.list[_active].tag[0] : _firstIndex;
			this.$store.commit('SET_TABLIST', { list: this.tab.list, active: _active });
			this.$store.commit('SET_SIDEMENULIST', { firstIndex: _firstIndex });
		},
		toContextmenu(index, e) {
			let left = e.layerX + 2;
			let top = e.layerY + 4;

			if (index > 0) {
				left += index * (singleTabW + 4);
			}

			this.contextMenu.isShow = true;
			this.contextMenu.top = top;
			this.contextMenu.left = left;
			this.contextMenu.index = index;
		},
		hideContextMenu() {
			this.contextMenu.isShow = false;
			this.isShowOperate = false;
		}
	}
};
</script>

<style lang="less" scoped>
@import '../assets/less/base/variables.less';
@import '../assets/less/mixins/clearfix.less';
@import '../assets/less/mixins/opacity.less';
.tab-wrapper {
	width: 100%;
	height: @tabH;
	max-height: @tabH;
	border-radius: 4px;
	display: flex;
	justify-content: space-between;
	position: relative;
	.list-inline {
		flex: 1;
		margin-left: 0px;
		margin-right: 10px;
		overflow: hidden;
		.clearfix;
		li {
			position: relative;
			float: left;
			margin-right: 4px;
			max-width: @singleTabW;
			width: @singleTabW;
			height: @tabH;
			line-height: @tabH;
			background-color: @lightGrey;
			border-bottom: 1px solid @greydd;
			border-radius: 4px 4px 0px 0px;
			padding: 0px;
			&:last-child {
				margin: 0px;
			}
			&.active {
				background-color: @green;
				a {
					color: #fff;
				}
				.close {
					color: #fff;
					&:hover {
						color: @lightGrey;
					}
				}
				&:hover {
					background-color: darken(@green, 3%);
				}
			}
			&:hover {
				background-color: darken(#fff, 3%);
			}
			.close {
				position: absolute;
				right: 8px;
				top: 50%;
				transform: translateY(-50%);
				.opacity(1);
				font-size: 24px;
				color: @darkGrey;
				cursor: pointer;
				&:hover {
					color: @black;
				}
			}
			a {
				display: inline-block;
				width: 100%;
				text-align: left;
				padding-left: 16px;
				padding-right: 16px;
				font-size: 13px;
				color: @darkGrey;
				letter-spacing: 0.8px;
				overflow: hidden;
				cursor: pointer;
			}
		}
	}
	.more-tab-wrapper {
		width: @tabH;
		height: @tabH;
		position: relative;
	}
	.show-more-tab {
		display: inline-block;
		width: 100%;
		height: 100%;
		line-height: @tabH;
		font-size: 24px;
		text-align: center;
		color: @darkGrey;
		&:hover {
			background-color: rgba(0, 0, 0, 0.1);
			border-bottom: 1px solid @greydd;
			border-radius: 4px 4px 0px 0px;
		}
	}
}
.tab-list-wrapper {
	position: absolute;
	top: 30px;
	right: 0px;
	width: 200px;
	padding-bottom: 5px;
	background-color: #fff;
	border: 1px solid @greydd;
	z-index: 8888;
	.contextmenu-box {
		position: static;
		top: 0px;
		left: 0px;
		right: 0px;
		width: 100%;
		padding: 5px 0px 0px 0px;
		border-radius: 0px;
		box-shadow: none;
		margin-right: 0px;
		z-index: 8889;
	}
	.tab-list-box {
		width: 100%;
		padding-top: 5px;
		max-height: 260px;
		margin-top: 5px;
		border-top: 1px solid @greydd;
		overflow-y: scroll;
		li {
			width: 100%;
			padding: 5px 24px 5px 20px;
			font-size: 13px;
			color: @black;
			cursor: pointer;
			&:hover,
			&.on {
				background-color: @greycc;
				/*color: #FFF;*/
			}
		}
	}
}
</style>
